<div nz-row>
  <div nz-col [nzSpan]="6" style="float:left">
    <nz-input-group [nzSuffix]="suffixIconSearch" style="width: 400px">
      <input type="text" nz-input placeholder="请输入搜索内容..." [(ngModel)]="filter" (keyup.enter)="getGroupPage(true)">
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon type="search"></i>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="18" style="text-align: right">
    <button nz-button nzType="primary" (click)="createGroupUserModal()">
      <i class="icon-sac-usergroup-add"></i>创建小组
    </button>
  </div>
</div>
<div class="custom_table">
  <nz-table #groupTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzTotal]="total"
    [nzLoading]="loading" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="getGroupPage()"
    (nzCurrentPageDataChange)="currentPageDataChange($event)" (nzPageSizeChange)="getGroupPage(true)">
    <thead>
      <tr>
        <th nzShowSort nzSortKey="name">小组</th>
        <th nzShowSort nzSortKey="name">应用</th>
        <th><span>用户</span></th>
        <th><span>创建时间</span></th>
        <th nzShowSort nzSortKey="email"><span>状态</span></th>
        <th><span>操作</span></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of groupTable.data">
        <td> {{ data.groupName }} </td>
        <td> {{ data.appliacationNum }} </td>
        <td> {{ data.userNum }} </td>
        <td> {{ data.createTime }} </td>
        <td>
          <ng-container *ngIf="data.statusName==='激活'; else statusName">
            <p class="grade-B">
              {{ data.statusName }}
            </p>
          </ng-container>
          <ng-template #statusName>
            <p class="grade-A">
              {{ data.statusName }}
            </p>
          </ng-template>
        </td>
        <td>
          <a (click)="updateGroupUserModal(data.groupName,data.groupUuid)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a nz-popconfirm nzTitle="确定要删除吗?删除后数据将无法恢复!" [nzCondition]="switchValue"
            (nzOnConfirm)="delete(data.groupUuid)" (nzOnCancel)="cancel()">删除</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>
